<template>
  <div>
    <el-button
      type="primary"
      size="default"
      icon="ele-Plus"
      @click="showAddSpu"
      :disabled="!category3Id"
      >添加SPU</el-button
    >
    <el-table :data="spuList" border style="margin: 20px 0">
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="80"
      ></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button
            type="success"
            size="small"
            icon="ele-Plus"
            title="添加sku"
            @click="showAddSku"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            icon="ele-Edit"
            title="修改spu"
            @click="showUpdateSpu(row)"
          ></el-button>
          <el-button
            type="info"
            size="small"
            icon="ele-InfoFilled"
            title="查看sku列表"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            title="删除spu"
            @click="deleteSpu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :page-sizes="[3, 5, 7, 9]"
      :total="total"
      layout="prev, pager, next, jumper,->,sizes,total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "SpuList",
});
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";
import spuApi, { type SpuListData, type SpuData } from "@/api/spu";
const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);
const page = ref(1);
const limit = ref(3);
const total = ref(0);
const spuList = ref<SpuListData>([]);
const emit = defineEmits(["setShowState"]);
// 封装函数获取spu的分页列表数据
async function getSpuPageList() {
  try {
    const res = await spuApi.getSpuPageList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    total.value = res.total;
    spuList.value = res.records;
  } catch (error) {
    ElMessage.error("获取spu的分页列表失败");
  }
}
watch(
  category3Id,
  (newVal) => {
    if (newVal) {
      //有值
      getSpuPageList();
    } else {
      //没值
      spuList.value = [];
    }
  },
  { immediate: true }
);
// 每页大小变化自动执行的回调函数
function handleSizeChange(num: number) {
  limit.value = num;
  getSpuPageList();
}
// 当前页变化自动执行的回调函数
function handleCurrentChange(num: number) {
  page.value = num;
  getSpuPageList();
}
// 点击添加spu
function showAddSpu() {
  // 触发自定义事件 要去把父组件当中的数据showState改为2  让SpuForm组件显示
  emit("setShowState", 2);
}

// 点击添加spu或者修改spu 都会进入SpuForm组件 但是他们两者进入SpuForm组件时逻辑时不同的
// 点击添加spu进入的话只需要发送两个请求 点击修改spu进入的话需要发送四个请求
// 所以进入SpuForm组件时要区分时添加spu进去的还是修改spu进去的

// 点击修改spu
function showUpdateSpu(row: SpuData) {
  // 触发自定义事件 要去把父组件当中的数据showState改为2  让SpuForm组件显示
  // row就是修改所点击的那个spu对象
  emit("setShowState", 2, row);
}
// 点击添加sku
function showAddSku() {
  // 触发自定义事件 要去把父组件当中的数据showState改为3  让SkuForm组件显示
  emit("setShowState", 3);
}

//删除spu
async function deleteSpu(row: SpuData) {
  console.log(row);
  try {
    await spuApi.deleteSpu(row.id as number);
    ElMessage.success("删除成功"); 
    //删除成功后需要更新数据
    if (spuList.value.length === 1) {
      page.value -= 1;
    }
    getSpuPageList();
  } catch (error) {
    ElMessage.error("删除失败");
  }
}
</script>

<style scoped></style>
